<template>
  <div class="shop-car-management">
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <span class="title">购物车管理</span>
        </div>
      </template>
      
      <el-table :data="shopCarList" style="width: 100%" v-loading="loading">
        <el-table-column prop="shopId" label="购物车ID" width="120" />
        <el-table-column prop="userId" label="用户ID" width="120" />
        <el-table-column prop="goodsId" label="商品ID" width="120" />
        <el-table-column label="商品信息" min-width="400">
          <template #default="{ row }">
            <div v-if="row.goodsInfo" class="goods-info">
              <el-image
                :src="IMAGE_URL + row.goodsInfo.images[0]"
                fit="cover"
                style="width: 60px; height: 60px; border-radius: 4px"
              />
              <div class="goods-detail">
                <div class="goods-title">{{ row.goodsInfo.title }}</div>
                <div class="goods-text">{{ row.goodsInfo.text }}</div>
                <div class="goods-price">
                  <span class="current-price">¥{{ row.goodsInfo.currentPrice }}</span>
                  <span class="original-price">¥{{ row.goodsInfo.originalPrice }}</span>
                </div>
                <div class="goods-label">
                  <el-tag size="small" type="warning">{{ row.goodsInfo.label }}</el-tag>
                  <span class="business-name">{{ row.goodsInfo.businessName }}</span>
                </div>
              </div>
            </div>
            <div v-else>加载中...</div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="商品数量" width="120" />
        <el-table-column prop="isSelected" label="是否选中" width="120">
          <template #default="{ row }">
            <el-tag :type="row.isSelected === 1 ? 'success' : 'info'">
              {{ row.isSelected === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getShopCarList, deleteShopCar } from "@/api/shopCar";
import { getGoodsDetail } from "@/api/goods";
import { IMAGE_URL } from "@/utils/request";

const loading = ref(false);
const shopCarList = ref([]);

// 获取商品信息
const getGoodsInfo = async (goodsId) => {
  try {
    const res = await getGoodsDetail(goodsId);
    return res.data;
  } catch (error) {
    console.error('获取商品信息失败:', error);
    return null;
  }
};

// 获取购物车列表
const getList = async () => {
  loading.value = true;
  try {
    const res = await getShopCarList();
    shopCarList.value = res.data;
    
    // 获取每个商品的详细信息
    for (const item of shopCarList.value) {
      item.goodsInfo = await getGoodsInfo(item.goodsId);
      console.log(item.goodsInfo);
    }
  } catch (error) {
    console.error('获取购物车列表失败:', error);
    ElMessage.error("获取购物车列表失败");
  } finally {
    loading.value = false;
  }
};

// 删除购物车商品
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该商品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteShopCar(row.shopId);
      ElMessage.success('删除成功');
      getList();
    } catch (error) {
      console.error('删除失败:', error);
      ElMessage.error('删除失败');
    }
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.shop-car-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.main-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #409EFF;
  border-radius: 2px;
}

.goods-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.goods-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.goods-title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-text {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.current-price {
  font-size: 16px;
  color: #f56c6c;
  font-weight: 600;
}

.original-price {
  font-size: 12px;
  color: #909399;
  text-decoration: line-through;
}

.goods-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.business-name {
  font-size: 12px;
  color: #606266;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table td) {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table tr:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-button--link) {
  padding: 0 8px;
  font-size: 13px;
  transition: color 0.3s;
}

:deep(.el-button--link:hover) {
  color: #f56c6c;
}

:deep(.el-tag--small) {
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  border-radius: 4px;
}

:deep(.el-tag) {
  border-radius: 4px;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
}

:deep(.el-image) {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

:deep(.el-image:hover) {
  transform: scale(1.05);
}

:deep(.el-loading-mask) {
  border-radius: 8px;
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 